<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>部门申请列表</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<script src="../public/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<%if(session.getAttribute("user")==null){ %>
    <script>
		window.top.location.replace("../login.jsp");
	</script>
<%}%>
<div>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		<legend><h2  style="color:#c2c2c2"><span id="deptname" style="color:#393D49"></span>申请列表</h2></legend>
	</fieldset>
	<table class="layui-hide" id="demo" lay-filter="form"></table>
	
	<!-- 头部工具栏 -->
	<script type="text/html" id="search">
		指定显示
		<div class="layui-inline layui-form">
	  	  <select id="condition" name="condition">
        	<option value="" selected>请选择</option>
			<option value="0">待审核的</option>
        	<option value="1">审核通过的</option>
			<option value="2">审核不通过的</option>
		  </select>
	 	 </div>
  		 <button class="layui-btn" name="search" data-type="reload"  lay-event="search">确认</button>
	</script>
<!-- 	行级工具栏 -->
	<script type="text/html" id="statusTpl">
  		{{#  if(d.status == 0){ }}
				<span style="color:#01AAED;">待处理</span>
   	 			<div  class="layui-btn-group">
					<button class="layui-btn layui-btn-xs" lay-event="agree">同意</button>
					<button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="refuse">拒绝</button>
				</div>
  		{{#  } else if(d.status == 1){ }}
   	 			<div style="color:#5FB878; ">申请已通过</div>
				
  		{{#  } else { }}
   	 			<div style="color:#FF5722;">申请已拒绝</div>
					
		{{#  } }}
	</script>
	<script type="text/javascript">
	layui.use(['table', 'jquery','layer','form'],function(){
		$ = layui.jquery;
		var table = layui.table;
		var layer = layui.layer;
		var form = layui.form;
		
		var tableIns = table.render({
			done: function(res, curr, count){
				document.getElementById("deptname").innerText = "${sessionScope.user.deptname }";
			}
			,elem: '#demo'
			    ,height: 550
			    ,url: '../ManagerServlet?button=5' //数据接口
		    	,toolbar: '#search'
			    ,page: true //开启分页
			    ,defaultToolbar:["print"]
			    ,cols: [[ //表头
			      {field: 'applyid', title: '申请编号', width:120, sort: true,fixed: 'left'}
			      ,{field: 'applicant', title: '申请人', width:100}
			      ,{field: 'applytime', title: '申请提交时间', width: 180, sort: true}
			      ,{field: 'operater', title: ' 处理对象', width:100}
			      ,{field: 'overtime', title: '普通加班时长（单位小时）', width:200} 
			      ,{field: 'weekovertime', title: '周末加班时长（单位小时）', width: 200}
			      ,{field: 'festovertime', title: '节假日加班时长（单位小时）', width: 220}
			      ,{field: 'applydescribe', title: '申请描述', width: 250}
			      ,{field: 'handle', title: '审批人', width: 100}
			      ,{field: 'handletime', title: '审批时间', width: 180, sort: true}
			      ,{field: 'status', title: '审批状态', width:150, templet:'#statusTpl',fixed: 'right'}
// 			      ,{field: 'handledescribe', title: '审批描述', width: 250}
			    ]]
		});
		// 顶部工具栏事件
		  table.on('toolbar(form)', function(obj){
//			  var checkStatus = table.checkStatus(obj.config.id);
			  var data = obj.data;
	    	  var condition = $('#condition');
	    	  var Condition = document.getElementById("condition");
	    	  if(condition.val()==""){
	    		  layer.msg("显示全部");
	    	  }else if(condition.val()=="0"){
	    		  layer.msg("显示待审核的");
	    	  }else if(condition.val()=="1"){
	    		  layer.msg("显示审核通过的");
	    	  }else if(condition.val()=="2"){
	    		  layer.msg("显示审核不通过的");
	    	  }
	    	  tableIns.reload({
	    		  url: '../ManagerServlet?button=5'
				  ,where: { //设定异步数据接口的额外参数，任意设
				    	"condition": condition.val(),
				    	"page":"1",
				    	"limit":"10"
				    }
			  });
			});
		//监听侧边工具条
			 table.on('tool(form)',function(obj){
				 var item = obj.data;
				 var layEvent = obj.event;
				 //粗略获取系统时间
				 var date = new Date();
				 var nowtime = date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
// 				 alert(nowtime);
				 //同意
				 if(layEvent === 'agree'){
	 				 $.ajax({
	 					 url:"../ManagerServlet?button=6&status=1&&applyid="+item.applyid+"&operater="+item.operater+"&overtime="+item.overtime+"&weekovertime="+item.weekovertime+"&festovertime="+item.festovertime
	 					 ,type:"post"
	 					 ,async:false
	 					 ,data: {}
	 					 ,success:function(res){
	 						 item.status = "1";
	 						 item.handle = "${sessionScope.userid}";
	 						 item.handletime = nowtime;
	 						 layer.msg(res);	//直接得到后端out.println()出的数据
	 					 }
		 				,error:function(res){
							 layer.msg(res);
						 }
	 				 });
 				 //拒绝
				 }else if(layEvent === 'refuse'){
					 $.ajax({
						 url:"../ManagerServlet?button=6&status=2&&applyid="+item.applyid+"&operater="+item.operater+"&overtime="+item.overtime+"&weekovertime="+item.weekovertime+"&festovertime="+item.festovertime
	 					 ,type:"post"
	 					 ,async:false
	 					 ,data: {}
	 					 ,success:function(res){
	 						 item.status = "2";
	 						 item.handle = "${sessionScope.userid}";
	 						 item.handletime = nowtime;
	 						 layer.msg(res);	//直接得到后端out.println()出的数据
	 					 }
		 				,error:function(res){
							 layer.msg(res);
						 }
	 				 });
				 }
				 obj.update(item);
			 });
// 			 table.on('edit(form)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
// 				  alert(obj.value); //得到修改后的值
// 				  alert(obj.field); //当前编辑的字段名
// 				  alert(obj.data); //所在行的所有相关数据  
// 				});
	});
	</script>

</div>
</body>
</html>